<template>
<div>
    <div v-if="mainShow">
    <van-tabs v-model="active" style="margin-top: 40px;">
         <van-tab :title="$t('financial.ordtype1')">
             <div class="financial">
                <van-nav-bar :title="$t('financial.current_own')" left-arrow @click-left="_return" fixed></van-nav-bar>
                <div class="financial-cur-coin">
                    <div class="financial-cur-coin-desc">
                        <div class="financial-cur-coin-desc-top">
                            <div class="financial-cur-coin-desc-top__label">
                                <img class="coin-logo" :src="'http://ht.aat.ink' + curCoinDetail.img" alt="">
                                <span style="vertical-align: middle">{{ $t('financial.current_own') }} {{ curCoinDetail.unit }}</span>
                                <img :src="eyeFlag ? openEye : closeEye" alt="" @click="eyeFlag = !eyeFlag" class="eye-icon">
                            </div>
                            <div class="financial-cur-coin-desc-top__value">
                                {{ priceCom(curCoinDetail.balance) }}
                            </div>
                        </div>
                        <div class="financial-cur-coin-desc-bottom">
                            <div class="financial-cur-coin-desc-bottom__label">
                                <span>{{ $t('financial.capital_sum') }} {{ curCoinDetail.unit }}</span>
                                <span>{{ $t('financial.capital_yesterday') }} {{ curCoinDetail.unit }}</span>
                            </div>
                            <div class="financial-cur-coin-desc-bottom__value">
                                <span>{{ curCoinDetail.totalProfit }}</span>
                                <span>{{ curCoinDetail.yesterdayProfit  }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="financial-cur-coin-chart">
                        <h5 class="financial-cur-coin-chart-title">
                            {{ Number(curCoinDetail.annualReturn)*100 }}%
                        </h5>
                        <p class="financial-cur-coin-chart-desc">{{ $t('financial.capital_notice') }}</p>
                        <div class="financial-cur-coin-chart-content">
                            <ve-line :data="charData" :legend-visible="false"></ve-line>
                        </div>
                    </div>
                </div>
            </div>
         </van-tab>
        <van-tab  :title="$t('financial.ordtype2')">
            <div class="nodeMain">
                <van-nav-bar :title="$t('financial.current_own')" left-arrow @click-left="_return" fixed></van-nav-bar>
                <div class="offer" v-if="offShow">
                    <img src="../../assets/offer.png" alt="">
                    <p>{{$t('ecology.nodes')}}</p>
                    <div class="btns">
                        <button class="btn" @click="showOff">{{$t('ecology.just_in')}}</button>
                    </div>
                </div>
                    <div class="changes" v-if="offShow">
                        <div class="change">
                    <van-row class="top" type="flex" justify="space-between">
                        <van-col>
                            <p>{{$t('ecology.exch_liet')}}(USDT)</p>
                            <span>{{re_usdt}}</span>
                        </van-col>
                        <van-col>
                        <!-- <p>商城余额</p>
                        <span>{{aat_coin}}</span> -->
                    </van-col>

                    </van-row>
                    </div>
                </div>
                <div class="btnboxs clearfix" v-if="offShow">
                    <div class="btns" @click="showConfirm">{{$t('ecology.exchange')}}</div>
                    <div class="btns" @click="showTrader">{{$t('ecology.exchange_list')}}</div>
                </div>
                <div class="changes" v-if="offsShow">
                    <div class="change">
                          <div class="financial-cur-coin-desc-top">
                            <div class="financial-cur-coin-desc-top__label">
                                <span style="vertical-align: middle">{{ $t('financial.current_own1') }} {{ curCoinDetail.unit }}</span>
                            </div>
                            <div class="financial-cur-coin-desc-top__value whit">
                                {{ priceCom(now_deferral) }}
                            </div>
                        </div>
                        <div class="financial-cur-coin-desc-bottom">
                            <div class="financial-cur-coin-desc-bottom__label">
                                <span>{{ $t('financial.capital_sum') }} {{ curCoinDetail.unit }}</span>
                                <span>{{ $t('financial.capital_yesterday') }} {{ curCoinDetail.unit }}</span>
                            </div>
                            <div class="financial-cur-coin-desc-bottom__value">
                                <span class="whit">{{totalProfit }}</span>
                                <span class="whit">{{yesterdayProfit  }}</span>
                            </div>
                        </div>
                        <!-- <van-row class="top" type="flex" justify="space-between">
                            <van-col>
                                <p>{{$t('ecology.exch_liet')}}(USDT)</p>
                                <span>{{re_usdt}}</span>
                            </van-col>
                            <van-col>
                                <p>{{$t('ecology.exch_liet')}}(USDT)</p>
                                <span>{{Number(mine.total).toFixed(2)}}</span>
                            </van-col>
                        </van-row>

                        <van-row class="bottom" type="flex" justify="space-between">
                            <van-col>{{$t('node.hadTo')}}</van-col>
                            <van-col>{{$t('node.force')}} {{mine.surplus}} USDT</van-col>
                        </van-row> -->
                    </div>
                    <div class="btnboxs clearfix">
                        <div class="btns" @click="showConfirm">{{$t('ecology.exchange')}}</div>
                        <div class="btns" @click="showTrader">{{$t('ecology.exchange_list')}}</div>
                    </div>
                    <div class="profit" >
                        <div v-for="(item,index) in profitList" :key="index" @click="showFit(index)">
                            <p>{{item.name}}</p>
                            <span  >{{item.value}}</span>
                        </div>
                    </div>
                    <div class="price">
                        <p>{{$t('ecology.now')}}</p>
                        <!-- <span>{{Number(1/mine.jiage).toFixed(2)}}<span>AAT / USDT</span></p> -->
                        <p>{{total_convertible_benefits}}<span>AAT / USDT</span></p>
                    </div>

                    <div class="mybtnlist">
                        <div class="myteam">{{$t('ecology.myteam')}}</div>
                        <div class="teamdetail clearfix">
                            <ul>
                                <li>
                                    <p class="tit">{{$t('ecology.member')}}</p>
                                    <!-- <p class="det">kskaks</p> -->
                                </li>
                                <li>
                                    <p class="tit">{{$t('ecology.buylevel')}}</p>
                                    <!-- <p class="det">铜矿</p> -->
                                </li>
                                <li>
                                    <p class="tit">{{$t('ecology.teaminto')}}</p>
                                    <!-- <p class="det">155000usdt</p> -->
                                </li>
                            </ul>
                        </div>
                        <div v-for="(item,index) in team_information" :key="index" class="teamdetaillist clearfix">
                            <p class="det">{{item.invite_code}}</p>
                            <p class="det">{{item.coin_num_sum}}</p>
                            <p class="det">{{item.team_performance}}</p>
                        </div>

                    </div>
                </div>
            </div>
        </van-tab>
    </van-tabs>
     <van-popup v-model="pwdShow" position="bottom" :overlay="true">
            <van-nav-bar :title="$t('pay.title')" leftArrow @click-left="pwdShow = false"/>
            <div class="pwdMain login">
                <van-cell-group>
                    <van-field v-model="payPassword" :placeholder="$t('pay.title')" input-align="center" type="password" maxlength="6"/>
                </van-cell-group>
                <p @click='forgetPwd'>{{$t('common.forget_password')}}？</p>
                <div class="btns">
                    <van-button type="info" @click="submitMove">{{$t('pay.button')}}</van-button>
                </div>
            </div>
        </van-popup>
        <loading v-if="loadingShow"></loading>
    </div>
         
         <rec v-if="recShow" @_return="_returns"></rec>

</div>
</template>

<script>
    import moment from 'moment'
      import rec from '@/components/coin/rec'
    import { Dialog } from 'vant';
    export default {
        data() {
            return {
                mainShow:true,
                 active: 0,
                curCoinDetail:{},
                openEye: require('../../assets/open-eye.png'),
                closeEye: require('../../assets/close-eye.png'),
                eyeFlag: true,
                price:0,
                charData:{
                    columns: ['日期', '年化收益率'],
                    rows:[]
                },
                 offerShow: false,
                offShow: false,
                recordShow: false,
                superShow: false,
                profitShow: false,
                marketShow: false,
                offsShow: false,
                pwdShow: false,
                payPassword: '',
                signShow: false,
                re_usdt: 0.0000,
                tradeShow:false,
                aat_coin:0.0000,
                child:{},
                coin: require('../../assets/coins.png'),
                profitList: [
                    {
                        name: `${this.$t('ecology.staticincome')}`,
                        value: 0.00001
                    },
                    {
                        name: `${this.$t('ecology.dynamicincome')}`,
                        value: 0.00001
                    },
                    {
                        name: `${this.$t('node.tab')[2]}(USDT)`,
                        value: 0.00001
                    }
                ],
                tabList:
                    {
                        title: '转换收益',
                        tip: '转换收益提现',
                        bac: require('../../assets/tab_a.png'),
                        alt: '转换'
                    }
                ,
                team_information:[],
                totalProfit:'',
                yesterdayProfit:'',
                 loadingShow:false,
                 recShow:false,
                now_deferral:''
            }
        },
        methods: {
            _return(){
                window.removeEventListener("scroll", this.reachBottom,true)
                this.$emit('_return')
            },
            forgetPwd() {
            },
            getData(){
                this.$api.get('bi/detail',{coin_name:this.coinName})
                    .then(res =>{
                        this.curCoinDetail = res.detail.coinInfo
                        res.detail.sevenAnnual.forEach(item =>{
                            item.add_time = moment(item.add_time*1000).format('hh:mm')
                            let obj = {
                                '日期':item.add_time,
                                '年化收益率':item.annual_return
                            }
                            this.charData.rows.push(obj)
                        })
                    })
            },
            showOff() {
                this.nodeShow = false
                this.offerShow = true
            },
            _returns() {
                this.mainShow = true
                this.recShow = false
                this.offerShow = this.recordShow = this.profitShow = this.superShow = this.marketShow = this.offShow = this.offsShow=this.tradeShow = false
                this.getStatus()
            },
            getStatus() {
                this.$api.post('Node/mynode')
                    .then(res => {
                        console.log(res)
                        if (res.detail.status === 1) {
                            this.offsShow = true
                            this.mine = res.detail.data
                            // this.profitList[0].value = Number(this.mine.static).toFixed(2)
                            // this.profitList[1].value = Number(this.mine.dynamic).toFixed(2)
                            // // this.profitList[2].value = Number(this.mine.aat_coin).toFixed(2)
                            // this.profitList[2].value = Number(this.mine.yeji).toFixed(2)
                            // this.re_usdt = Number(res.detail.data.re_usdt).toFixed(2)
                            // this.child=res.detail.data.child
                        } else {
                            this.offShow = false
                            this.re_usdt = Number(res.detail.data.re_usdt).toFixed(2)
                            this.aat_coin=Number(res.detail.data.aat_coin).toFixed(2)
                        }
                    })
            },
            //定期界面的数据
             getcurrentInterfaceData() {
                  this.$api.get('bi/currentInterfaceData',{coin_name:this.coinName})
                    .then(res =>{
                          this.team_information = res.detail.team_information
                          this.profitList[0].value = Number(res.detail.static_earnings)
                          this.profitList[1].value = Number(res.detail.dynamic_earnings)
                          this.profitList[2].value = Number(res.detail.total_performance)
                          this.totalProfit=res.detail.accumulated_earnings,
                          this.yesterdayProfit=res.detail.earnings_yesterday
                          this.total_convertible_benefits=res.detail.total_convertible_benefits
                          this.now_deferral=res.detail.now_deferral
                          console.log(this.profitList[0].value)
                        })
            },
            showRecord() {
                this.mainShow = false
                // this.nodeShow = false
                this.recordShow = true
            },
            showTrader() {
                this.mainShow = false
                // this.nodeShow = false
                this.recShow = true
            },
            showTab(tab) {
                if (tab === 'node') {
                    this.superShow = true
                    this.nodeShow = false
                } else {
                    this.marketShow = true
                    this.nodeShow = false
                }
            },
            showConfirm() {
                if (this.total_convertible_benefits > 0) {
                    Dialog.confirm({
                        title: '提示',
                        message: '确认要转换收益[' + this.total_convertible_benefits + ']到账户吗？'
                    }).then(() => {
                        console.log('123')
                        this.pwdShow = true
                    }).catch(() => {
                        // on cancel
                    });
                } else {
                   this.$toast("您暂时没有可以转换的收益")
                }
            },
            showFit(index) {
                if(index!=2&&index!=3){
                this.nodeShow = false
                this.profitShow = true
                }
            },
            submitMove() {
                let param = {
                    coin_name: this.coinName,
                    paypassword: this.payPassword,
                  
                }
                 this.loadingShow = true
                this.$api.post('bi/benefitsFor', param,this)
                    .then(res => {
                        console.log(res)
                         this.loadingShow = false
                        this.pwdShow = false
                        this.payPassword = ''
                        this.signShow = true
                         //this.$toast(res.message)
                        this._return()
                    })
                     .catch(err =>{
                         // this.$toast(err.message)
                    //  this.loadingShow = false
                        this.pwdShow = false
                })
            },
        },
        created() {
            this.getData()
            console.log(this.coinName)
            this.getStatus()
            this.getcurrentInterfaceData()
        },
        mounted() {

        },
        computed: {
            priceCom() {
                return function (price) {
                    return this.eyeFlag ? price : String(price).replace(/./g, '*')
                }
            },
        },
        props:{
            coinName:{}
        },
         components:{
          rec
        }
    }
</script>

<style lang="stylus" scoped>
    [class*=van-hairline]::after{
        border: none;
    }
    .nodeMain
        width 94%
        margin 0 auto

        .offer
            

            img
                display block
                margin 0 auto
                width 90px
                padding 30px 0 5px
                opacity 0.9

            p
                text-align center
                color #898989
                padding-bottom 10px

            .btn
                width 130px
                height 40px

            .btns
                display flex
                justify-content center
                padding-bottom 23px

        .changes
            .change
                padding 10px
                background: linear-gradient(180deg, #54d8b4, #26c196)
                box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.5);
                border-radius 5px
                .top
                    padding-bottom 10px

                    .van-col
                        p
                            font-size 12px
                            color #115f49

                        span
                            color #fff
                            display block
                            font-size 24px

                        &:last-child
                            span
                                text-align right

                .bottom
                    margin-top 10px
                    padding-bottom 5px

                    .van-col
                        color #FFFFFF
                        font-size 12px


            .profit
                display flex
                justify-content space-between
                flex-flow row wrap
                padding-bottom 10px

                div
                    width 50%
                    margin-top 15px

                    p
                        color #898989
                        font-size 12px

                    span
                        display inline-block
                        margin-top 8px
                        color #DBC8AA
                        font-size 18px


            .price
                background: #fff;
                margin 10px 0
                overflow hidden
                border 1px solid #ebebeb
                p
                    text-align center

                    &:first-child
                        margin-top 25px
                        font-size 12px
                        color #898989

                    &:last-child
                        color #26c196
                        font-size 24px
                        margin-bottom 24px
                        position relative

                        span
                            font-size 12px
                            color #898989
                            position absolute
                            bottom: 5px
                            right 0


            .tab
                border-top 1px solid #404040
                margin-top 10px
                display flex
                justify-content space-between
                overflow hidden

                div
                    width 48%
                    margin-top 10px

                    p
                        color #414141
                        margin-top 10px
                        font-size 16px
                        margin-left 10px

                    span
                        margin-top 3px
                        font-size 12px
                        color #898989
                        padding-bottom 20px
                        display inline-block
                        margin-left 10px

    
    /* 新加css */
    .btnboxs{width: 100%;box-sizing: border-box;margin-top:.9375rem}
    .btnboxs > .btns{width: 45%;margin-right: 10%;height: 40px;font-size: 14px;float: left;background: linear-gradient(180deg,#ff7541,#f6543e);;color: #414141;line-height: 40px;text-align: center;font-size: 1rem;color #fff}
    .btnboxs > .btns:last-child{margin-right: 0px;background: linear-gradient(180deg,#64b9ff,#2f8edc);;}
    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    .mybtnlist{    border-top: 1px solid #404040;
        margin-top: .625rem;
        display: block;
    justify-content: space-between;
    overflow: hidden;}
    .mybtnlist > .list{}
    .mybtnlist .myteam{margin-top: .1875rem;
        font-size: 1rem;
        color: #898989;
        display:block;
        width: 100%;text-align: center;margin-top:.9375rem;background: linear-gradient(180deg, #54d8b4, #26c196);height:40px;line-height: 40px;color: #414141;margin-bottom: 1rem }
    .teamdetail{width: 100%}
    .teamdetail ul li{width: 33%;float: left;padding-top: 0.5rem;padding-bottom: 0.5rem;text-align: center;border-right: 1px solid #404040}
    .teamdetail ul li:last-child{border-right: none}
    .teamdetail ul li .tit{    color: #898989;
        font-size: 1rem;}
    .teamdetail ul li .det{    display: inline-block;
        margin-top: .5rem;
        color: #dbc8aa;
        font-size: 1.125rem;}
    .teamdetaillist p{width: 33%;float: left;padding-bottom: 0.5rem;text-align: center;border-right: 1px solid #404040;color: #dbc8aa;
        font-size: 1.125rem;line-height: 1.5rem}
    .teamdetaillist p:last-child{border: none}
    .nodeMain .changes .price :first-child {
        margin-top: 0.7625rem  !important;
    }
    .nodeMain .changes .price p:last-child span {
        right: 0.9rem !important;
    }
    .nodeMain .changes .price p:last-child {
        margin-bottom: 1.1rem !important;
    }
    .nodeMain .changes .price p:last-child {
        margin-top: 0.6rem !important;
    }
.whit{color: #fff!important;}

    .pwdMain{
        width: 96%;
        margin: 0 auto;
        .van-cell-group{
            border-top: 1px solid #ebedf0;
            border-bottom: 1px solid #ebedf0;
        }
        p{
            text-align: center;
            color: #26c196;
            font-size: 12px;
            margin-top: 10px;
        }
        .van-cell{
            background: #fff !important;
            color: #26c196;
            .van-cell__value{
                color: #FDDEB0;
            }
        }
        .btns{
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            margin-top: 170px;
            padding-bottom 15px
            .van-button{
                width: 100%;
                color: #000;
                background:linear-gradient(180deg, #54d8b4, #26c196);
                border: none;
                /*margin-left: 5%;*/
            }
        }
    }
    .financial {
        /*background-color: #071E57;*/

        &-main {
            margin-top: 46px;
            padding: 15px;
            margin-bottom: 60px;

            &-info {
                background:linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
                box-shadow:0px 6px 12px 0px rgba(0,0,0,0.5);
                border-radius 5px
                padding: 15px;

                &-top {
                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

                    &-txt {
                        font-size: 12px;
                        color: #fff;
                    }

                    &-price {
                        font-size: 36px;
                        line-height: 40px;
                        color: #CBAF89;
                        margin-bottom: 8px;
                    }
                }

                &-bottom {
                    margin-top: 12px;
                    display: flex;
                    justify-content: space-between;

                    &-item {
                        &__label {
                            font-size: 12px;
                            color: #fff;
                            height: 16px;
                            line-height: 16px;
                        }

                        &__value {
                            margin-top: 4px;
                            font-size: 18px;
                            color: #CBAF89;
                            height: 22px;
                            line-height: 22px;
                        }

                        &:last-child {
                            text-align: right;
                        }
                    }
                }
            }

            &-list {
                &-item {
                    padding: 12px 15px;
                    background:linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
                    margin-top: 10px;
                    border-radius 5px
                    color white
                }

                &-label {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    div {
                        img {
                            width: 30px;
                            height: 30px;
                            vertical-align: middle;
                            margin-right: 3px;
                        }

                        font-size: 14px;

                        &:last-child {
                            opacity: 0.6;
                        }
                    }
                }

                &-value {
                    margin-top: 4px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 24px;

                    .price {
                        color: #CBAF89;
                        margin-right: 2px;
                    }
                }
            }
        }

        &-cur-coin {
            width: 94%;
            margin: 50px auto;
            margin-top:0px
            &-desc {
                padding: 15px;
                background:linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
                box-shadow:0px 6px 12px 0px rgba(0,0,0,0.5);
                border-radius 5px
                &-top {
                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                    text-align: center;
                    &__label {
                        position: relative;
                        font-size: 12px;
                        line-height: 16px;
                        color #FFFFFF
                        .coin-logo {
                            width: 15px;
                            height: 15px;
                            vertical-align: middle;
                            margin-right: 4px;
                        }
                        .eye-icon {
                            position: absolute;
                            top: 0;
                            right: 15px;
                        }
                    }
                    &__value {
                        font-size: 36px;
                        color: #CBAF89;
                        margin-bottom: 8px;
                    }
                }

                &-bottom {
                    margin-top: 13px;
                    &__label {
                        display: flex;
                        justify-content: space-between;
                        font-size: 12px;
                        line-height: 16px;
                        color #FFFFFF
                    }
                    &__value {
                        display: flex;
                        justify-content: space-between;
                        font-size: 18px;
                        color: #CBAF89;
                        line-height: 22px;
                    }
                }
            }

            &-chart {
                margin-top: 40px;
                &-title {
                    text-align: center;
                    font-size: 36px;
                    color: #CBAF89;
                    line-height: 40px;
                }
                &-desc {
                    text-align: center;
                    font-size: 12px;
                    line-height: 16px;
                    color #FFFFFF
                }
            }
        }
        &-turn-out, &-turn-in, &-record-list {
            padding: 60px 15px;
        }
        &-record-list {
            &-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 12px 10px;
                background-color: #0E2764;
                margin-bottom: 5px;
                &-desc {
                    display: flex;
                    align-items: center;
                    img {
                        width: 30px;
                        height: 30px;
                        margin-right: 5px;
                    }
                }
                &__label {
                    font-size: 14px;
                }
                &__time {
                    font-size: 12px;
                    opacity: 0.6;
                }
            }
        }

        &-turn-out, &-turn-in {
            &-info {
                background-color: #0E2764;
                padding: 12px 10px;
                display: flex;
                justify-content: space-between;

                &-wrap {
                    display: flex;
                    align-items: center;
                    img {
                        width: 30px;
                        height: 30px;
                        margin-right: 10px;
                    }
                }
                &-label {
                    font-size: 12px;
                    line-height: 16px;
                }
                &-value {
                    font-size: 14px;
                    color: #44CEFA;
                    line-height: 20px;
                }
            }
            &-inp {
                margin-top: 10px;
                background-color: #fff;
                padding: 10px;
                font-size: 14px;
                .van-cell.van-field {
                    margin-top: 20px;
                    background-color: #fff !important;
                    padding: 0;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                    .van-button {
                        border: none;
                        background-color: #0E2764;
                        color: #44CEFA;
                        &:active::before {
                            background-color: #0E2764;
                        }
                    }
                }
            }
            &-btn {
                margin-top: 20px;
                border: none;
                background-color: #4BC5F9;
                width: 100%;
                height: 44px;
                border-radius: 22px;
                color: #fff;
            }
        }

        &-turn-coin {
            &-header {
                height: 75px;
                line-height: 75px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .van-icon.van-icon-arrow-left {
                    font-size: 20px;
                }
            }
        }
        &-pay-pwd {
            height: 100%;
            background: #0E2764;

            &-tip {
                text-align: center;
                color: #FFD63B;
                font-size: 12px;
                margin-top: 10px;
            }

            &-btn {
                display: flex;
                justify-content: center;
                margin-top: 170px;
                padding-bottom: 15px;

                .van-button {
                    width: 96%;
                    border-radius: 22px;
                    color: #fff;
                    border: none;
                    background-color: #4BC5F9;
                }
            }
        }

        &-footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            box-sizing: border-box;
            background:linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
            box-shadow:0px -2px 20px -6px rgba(0,0,0,0.42);
            padding: 8px 10px;
            display: flex;
            justify-content: space-between;

            &-btn {
                border: none;
                padding: 0 70px;
                height: 44px;
                border-radius: 5px;
                color: #1F1F1F;
                background:linear-gradient(90deg,rgba(203,175,137,1) 0%,rgba(219,200,170,1) 100%);

                &:first-child {
                    background:rgba(216,216,216,1);
                }
            }
        }

        .van-popup {
            height: 50%;
        }
    }
</style>